<template>
<div>
  <van-nav-bar title="协会列表" left-text="返回" left-arrow @click-left="onClickLeft" fixed />
  <van-notice-bar left-icon="volume-o" style="margin-top: 46px;" scrollable>请您先了解或资讯协会，警防受骗！</van-notice-bar>
  <div class="title">请选择您需要申请的协会</div>
  <van-search v-model="value" placeholder="请输入搜索关键词" input-align="center" />
  <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
    <van-cell v-for="item in list" :key="item">
      <div class="item-content" @click="$router.push({ name: 'associationDetail', params: { id: item.id } })">
        <div>
          <img class="item-imgs" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
        </div>
        <div class="item-infos">张三</div>
        <div>
          <img class="icon-images" src="@/assets/img/返 回.png" />
        </div>
      </div>
    </van-cell>
  </van-list>
</div>
</template>

<script>
export default {
  name: 'associationList',
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push({
        name: 'farmerApply'
      })
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 4; i++) {
          this.list.push(this.list.length + 1);
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 10) {
          this.finished = true;
        }
      }, 1000);
    },
  }
}
</script>

<style>
.title {
  margin: 10px 0 8px 14px;
  font-size: 14px;
  font-weight: 400;
  line-height: 13px;
  color: #6A6F7A;
}

.item-content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
  border-radius: 8px;
}

.item-infos {
  flex: 1;
  font-size: 16px;
  font-weight: bold;
  line-height: 22px;
  color: #2C2E34;
  opacity: 1;
}

.item-imgs {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  border-radius: 50px;
}

.icon-images {
  width: 12px;
  height: 12px;
}
</style>
